<template>
    <div class="photoInfo-container">
        <h3 class="title">{{ photoInfo_list.title }}</h3>
        <p class="info">
            <span>发表时间&nbsp;:&nbsp;{{ photoInfo_list.add_time | dateFormat }}</span>
            <span>点击次数&nbsp;：&nbsp;{{ photoInfo_list.click }}</span>
        </p>
        <hr>
        <!-- 缩略图区域 -->
        <div class="thumbs">
            <img class="preview-img" v-for="(item, index) in photolist" :src="item.src" height="100" @click="$preview.open(index, photolist)" :key="item.url" >
        </div>
        <!-- 图片内容区域 -->
        <div class="photo-content" v-html="photoInfo_list.content"></div>
        <!-- 评论组件区域 -->
        <cmt :id="id"></cmt>
    </div>
</template>
<script>
// 导入comment.vue子组件
import comment from "../subcomponents/comment.vue";
export default {
    data() {
        return {
            // 拿到穿过来的id
            id: this.$route.params.id,
            photoInfo_list: [],
            photolist:[],//存储缩略图的数据
        }
    },
    created() {
        this.getPhotoInfo();
        this.getThumbImg();
    },
    methods: {
        getPhotoInfo() {
            this.$http.get("http://www.liulongbin.top:3005/api/getimageInfo/" + this.id).then(result => {
                if (result.body.status === 0) {
                    // console.log(result.body);
                    this.photoInfo_list = result.body.message[0];
                }
            })
        },
        getThumbImg(){
            this.$http.get("http://www.liulongbin.top:3005/api/getthumimages/"+this.id).then(result => {
                if(result.body.status===0){
                    // console.log(result.body);
                    result.body.message.forEach(item =>{
                        // 添加模板中的w和h
                        item.w=600;
                        item.h=400;
                    });
                    console.log(result.body);
                    this.photolist=result.body.message;
                }
            })
        },
    },
    components: {
        // 注册为私有组件
        "cmt": comment,
    }

}
</script>
<style lang="less" scoped>
.photoInfo-container {
    padding: 3px;

    .title {
        font-size: 14px;
        text-align: center;
        margin: 15px 0;
        color: #26A2FF;
    }

    .info {
        display: flex;
        justify-content: space-between;
        font-size: 12px;
    }

    .photo-content {
        color: #000;
        font-size: 12px;
        line-height: 30px;
    }
    .thumbs{
        img{
            margin:8px;
            box-shadow: 0 0 8px #999;
        }
    }
}
</style>